<template>
  <div class="login-container">
    <div class="background-squares">
      <div class="square square1"></div>
      <div class="square square2"></div>
      <div class="square square3"></div>
      <div class="square square4"></div>
      <div class="square square5"></div>
    </div>

    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form">

      <div class="title-container">
        <h3 class="title">OA办公系统</h3>
      </div>

      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="用户名"
          type="text"
          tabindex="1"
          autocomplete="on">
          <template #prefix>
            <el-icon><user /></el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="密码"
          :type="passwordVisible ? 'text' : 'password'"
          tabindex="2"
          autocomplete="on"
          @keyup.enter="handleLogin">
          <template #prefix>
            <el-icon><lock /></el-icon>
          </template>
          <template #suffix>
            <el-icon
              class="show-pwd"
              @click="passwordVisible = !passwordVisible">
              <view v-if="passwordVisible" />
              <hide v-else />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-button
        type="primary"
        style="width: 100%; margin-bottom: 30px;"
        @click="handleLogin">
        登录
      </el-button>
    </el-form>
  </div>
</template>

<script>
import axios_ from "@/utils/request"
import {login} from "@/api/auth";

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ]
      },
      passwordVisible: false
    }
  },
  methods: {
    // 登录方法
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 调用登录API
          login(this.loginForm).then(res => {
            if (res.code === 200) {
              this.$message.success('登录成功')
              // 存储用户信息和Token
              localStorage.setItem('token', res.data.token)
              localStorage.setItem('userId', res.data.userId)
              localStorage.setItem('username', res.data.username)
              localStorage.setItem('nickname', res.data.nickname)
              localStorage.setItem('avatar', res.data.avatar)
              // 跳转到首页
              this.$router.push('/')
            } else {
              this.$message.error(res.message || '登录失败')
            }
          }).catch(error => {
            this.$message.error('登录失败，请稍后重试')
            console.error('登录错误:', error)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.background-squares {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.square {
  position: absolute;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  animation: animate 10s linear infinite;
  backdrop-filter: blur(1px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.square1 {
  top: -50px;
  right: -60px;
  width: 100px;
  height: 100px;
  animation-delay: 0s;
}

.square2 {
  top: 150px;
  left: -100px;
  width: 120px;
  height: 120px;
  animation-delay: 1s;
  z-index: 2;
}

.square3 {
  bottom: 50px;
  right: -60px;
  width: 80px;
  height: 80px;
  animation-delay: 3s;
  z-index: 2;
}

.square4 {
  bottom: -80px;
  left: 100px;
  width: 50px;
  height: 50px;
  animation-delay: 4s;
}

.square5 {
  top: -80px;
  left: 140px;
  width: 60px;
  height: 60px;
  animation-delay: 5s;
}

@keyframes animate {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

.login-form {
  width: 400px;
  max-width: 100%;
  padding: 35px 35px 15px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
  z-index: 10;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.title-container {
  position: relative;
  margin-bottom: 30px;
}

.title {
  font-size: 26px;
  color: #2c3e50;
  margin: 0 auto 40px;
  text-align: center;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.show-pwd {
  cursor: pointer;
}
</style>
